<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '43aad992565d59ff7864b2076f89baed',
}
export default {
  data() {
    return {
      map: null,
      draw: null,
    }
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('container', {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 10, //初始化地图级别
        center: [121.473667, 31.230525], //初始化地图中心点位置
      })
      this.map.addControl(new AMap.Scale())
      this.map.addControl(new AMap.ToolBar())
      this.map.addControl(new AMap.HawkEye())
      this.map.addControl(new AMap.MapType())
      this.map.addControl(new AMap.Geolocation())
    },
    initDraw() {
      this.draw = new MapboxDraw({
        displayControlsDefault: false,

        controls: {
          polygon: true,
          point: true,
          line_string: true,
          trash: true,
        },

        defaultMode: 'draw_polygon',
        styles: [
          {
            id: 'gl-draw-polygon-fill-inactive', // 指定多边形非选中状态图层样式
            type: 'fill',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'fill-color': '#ff0000',
              'fill-outline-color': '#ff0000',
            },
          },
          {
            id: 'gl-draw-polygon-fill-active', // 指定多边形选中状态图层样式
            type: 'fill',
            filter: [
              'all',
              ['==', 'active', 'true'],
              ['==', '$type', 'Polygon'],
            ],
            paint: {
              'fill-color': '#fbb03b',
              'fill-outline-color': '#fbb03b',
              'fill-opacity': 0.1,
            },
          },
          {
            id: 'gl-draw-polygon-midpoint', // 多边形顶点样式
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['==', 'meta', 'midpoint'],
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#fbb03b',
            },
          },
          {
            id: 'gl-draw-polygon-stroke-inactive', // 多边形非激活状态轮廓线样式
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#ff0000',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-polygon-stroke-active',
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'true'],
              ['==', '$type', 'Polygon'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#fbb03b',
              'line-dasharray': [0.2, 2],
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-line-inactive',
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'LineString'],
              ['!=', 'mode', 'static'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#3bb2d0',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-line-active',
            type: 'line',
            filter: [
              'all',
              ['==', '$type', 'LineString'],
              ['==', 'active', 'true'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#fbb03b',
              'line-dasharray': [0.2, 2],
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 5,
              'circle-color': '#fff',
            },
          },
          {
            id: 'gl-draw-polygon-and-line-vertex-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#fbb03b',
            },
          },
          {
            id: 'gl-draw-point-point-stroke-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 5,
              'circle-opacity': 1,
              'circle-color': '#fff',
            },
          },
          {
            id: 'gl-draw-point-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static'],
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#3bb2d0',
            },
          },
          {
            id: 'gl-draw-point-stroke-active',
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['==', 'active', 'true'],
              ['!=', 'meta', 'midpoint'],
            ],
            paint: {
              'circle-radius': 7,
              'circle-color': '#fff',
            },
          },
          {
            id: 'gl-draw-point-active',
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['!=', 'meta', 'midpoint'],
              ['==', 'active', 'true'],
            ],
            paint: {
              'circle-radius': 5,
              'circle-color': '#fbb03b',
            },
          },
          {
            id: 'gl-draw-polygon-fill-static',
            type: 'fill',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon'],
            ],
            paint: {
              'fill-color': '#404040',
              'fill-outline-color': '#404040',
              'fill-opacity': 0.1,
            },
          },
          {
            id: 'gl-draw-polygon-stroke-static',
            type: 'line',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#404040',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-line-static',
            type: 'line',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'LineString'],
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round',
            },
            paint: {
              'line-color': '#404040',
              'line-width': 2,
            },
          },
          {
            id: 'gl-draw-point-static',
            type: 'circle',
            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
            paint: {
              'circle-radius': 5,
              'circle-color': '#404040',
            },
          },
        ],
      })
    },
  },
  mounted() {
    AMapLoader.load({
      key: '6a544d0f17e036c2ff74aab1b8d13121', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.Geolocation',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        console.log('ok')
        this.initMap()
        this.initDraw()
        console.log(this.map)
        console.log(this.draw)
        this.map.addControl(this.draw)
      })
      .catch((e) => {
        console.log('error')
        console.log(e)
      })
  },
}
</script>
<style lang="less" scoped>
#container {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
</style>
